首页头部样式调整：搜索框与快捷菜单
本节使用 uview-plus 组件和 UnoCSS/TailwindCSS 原子化 class 对首页头部进行样式优化，包括搜索框定位、轮播图间距、三按钮导航和公告栏的细节调整。这是前端开发中典型的"像素级调优"过程。
搜索框样式调整
使用 u-navbar 包裹
搜索框使用 u-navbar 组件包裹，利用其 leftSlot 插槽放置搜索组件：
<template>
<u-navbar :leftSlot="true" :bgColor="'transparent'">
<template #left>
<u-search
v-model="searchText"
placeholder="请输入关键字"
:showAction="false"
/>
</template>
</u-navbar>
</template>
vue
定位与间距
搜索框设置 showAction="false" 隐藏右侧按钮后，需要处理与轮播图的定位关系：
- 搜索框脱离文档流时，下方内容会上移遮挡
- 在轮播图和导航外层添加
padding-top补偿间距
<!-- 轮播与导航容器 -->
<view class="pt-22">
<u-swiper :list="bannerList" />
<!-- ... -->
</view>
vue
轮播图与导航间距
轮播图和三按钮导航之间需要合理的间距：
<view class="py-4">
<u-swiper :list="bannerList" />
</view>
vue
三按钮导航和公告栏需要包裹在一起，添加左右内边距和底部边框：
<view class="px-4 border-b border-gray-100">
<u-grid :col="3" :border="false">
<!-- 导航按钮 -->
</u-grid>
<!-- 公告栏 -->
</view>
vue
公告栏样式
结构
公告栏采用 flex 布局，左右分布：
<view class="py-2 flex justify-between items-center">
<!-- 左侧：图标+文字 -->
<view class="flex items-center">
<image
src="/static/icons/play.png"
style="width:40rpx;height:40rpx;margin-right:10rpx"
/>
<text class="font-bold">每日一刻</text>
<text class="pl-1 text-gray-500 text-sm flex-1 line-clamp-1">
美丽课详情介绍
</text>
</view>
<!-- 右侧：查看更多 -->
<view class="flex items-center">
<text class="text-gray-400 text-sm">查看更多</text>
<up-icon name="play-right-fill" size="12" color="#999" />
</view>
</view>
vue
样式要点
| 元素 | 样式处理 |
|---|---|
| 每日一刻文字 | font-bold 加粗 |
| 介绍文字 | text-gray-500 浅色 + text-sm 小字 + line-clamp-1 单行省略 |
| 图标与文字间距 | margin-right 或 pl-1 |
| 查看更多 | text-gray-400 + text-sm 灰色小字 |
| 右箭头 | up-icon 的 play-right-fill，size 12，颜色 #999 |
| 上下间距 | py-2 或 py-3 |
三按钮导航样式
图标尺寸调整
根据设计稿调整图标大小：
<image :src="item.icon" style="width:65rpx;height:88rpx" />
<text class="mt-2">{{ item.name }}</text>
vue
布局优化
宫格内元素需要垂直居中排列，图标下方显示名称，设置合理的底部间距。
样式调整的核心思路
- 先搭结构，再调样式：用基础组件搭建页面骨架，再逐步调整细节
- 对照设计稿：使用蓝湖或 Photoshop 查看标注，获取精确的间距、颜色值
- UnoCSS class 优先：能用原子化 class 解决的不写自定义 CSS
- 组件化封装：识别可复用区域，提取为基础组件
组件封装提示
首页下半部分的"为你推荐"、"精品微课"等区域可以抽象为通用卡片组件：
- vp-card：带标题的卡片容器，通过
wrapClass控制内边距 - vp-item：课程缩略图卡片，支持遮罩、标签、播放按钮
- vp-course-item：完整的课程信息卡片
下一节将深入讲解这些组件的封装实现。
↑